import React, { Fragment } from 'react'
import './index.less'
import http from 'libs/http'
import { Radio, message } from 'antd'

const RadioGroup = Radio.Group

export default class extends React.Component {
  state = {
    answer: '',
    questionType: 1, // 1.选择题 2.填空题
    questionIndex: null, // 当前题号
    question: '', // 问题
    optionList: [], // 选项集合
    detailId: null, // 试题ID
    isOver: false,
    result: null,
    showQuestionContainer: false,
    challengeId: null
  }

  componentDidMount() {
    this.getChallengeQuestions()
  }

  onChange = (e) => {
    this.setState({
      answer: e.target.value
    });
  }

  //拉取试题
  getChallengeQuestions = () => {
    // const { id } = this.props.match.params;
    const paramsStr = window.location.hash.split('?')[1]
    const challengeId = paramsStr.split('=')[1]
    const showErrorNotice = true
    http.get('/student/challenge/challengeQuestion', { challengeId }, undefined, showErrorNotice).then(res => {
      const {
        type: questionType, // 1.选择题 2.填空题
        questionIndex, // 当前题号
        question, // 问题
        options: optionList, // 选项集合
        detailId, // 试题ID
      } = res.data
      this.setState({
        questionType, // 1.选择题 2.填空题
        questionIndex, // 当前题号
        question, // 问题
        optionList, // 选项集合
        detailId, // 试题ID
        answer: '',
        challengeId
      });
    })
  }

  //提交答案
  saveExamDetail = () => {
    const { detailId, answer } = this.state;
    const showErrorNotice = true
    http.post('/student/challenge/saveChallengeQuestion', { detailId, answer }, undefined, showErrorNotice).then(res => {
      const { isOver, result } = res.data
      if (!isOver) {
        this.setState({
          showQuestionContainer: false,
          answer: '',
        }, this.getChallengeQuestions)
        
      } else {
        this.setState({
          isOver,
          result,
        });
      }
    })
  }

  //学生自己提交答案
  studentSaveAnwster = () => {
    const { answer } = this.state;
    if (answer) {
      this.saveExamDetail();
    } else {
      message.warn('请选择或着输入答案');
    }
  }

  handleShowDialog = index => () => {
    const { questionIndex } = this.state
    if(index === questionIndex) {
      this.setState({
        showQuestionContainer: true
      })
    }
  }
  handleClose = () => {
    this.props.history.push('/student_center/my_courses/layout/daily_challenge')
  }

  // lookErrorBook = () => {
  //   const { challengeId } = this.state
  //   this.props.history.push('/student_center_/my_courses/layout/error_book/'+challengeId)
  // }

  render() {
    const { answer, questionType, optionList, questionIndex, question, isOver, result, showQuestionContainer } = this.state

    return (
      <div className="dialy-challenge-container">
        <span className="challenge-back"></span>
        <div className="dialy-challenge-wrap">
          <div className="challenge-header"></div>
          <div className="challenge-content">
            <div className="challenge-way">
              <div className="flag"></div>
              <div onClick={this.handleShowDialog(1)} className='challenge-step challenge-step-1 unlock'>
                <span></span>
                <p><i></i></p>
              </div>
              <div onClick={this.handleShowDialog(2)} className={`challenge-step challenge-step-2 ${questionIndex > 1 ? 'unlock' : 'lock'}`}>
                <span></span>
                <p><i></i></p>
              </div>
              <div onClick={this.handleShowDialog(3)} className={`challenge-step challenge-step-3 ${questionIndex > 2 ? 'unlock' : 'lock'}`}>
                <span></span>
                <p><i></i></p>
              </div>
              <div onClick={this.handleShowDialog(4)} className={`challenge-step challenge-step-4 ${questionIndex > 3 ? 'unlock' : 'lock'}`}>
                <span></span>
                <p><i></i></p>
              </div>
              <div onClick={this.handleShowDialog(5)} className={`challenge-step challenge-step-5 ${questionIndex > 4 ? 'unlock' : 'lock'}`}>
                <span></span>
                <p><i></i></p>
              </div>
              <div className="moon-bg"></div>
            </div>
          </div>
        </div>
        
        <div className="question-container" style={{ display: `${showQuestionContainer ? '' : 'none' }`}}>
          <div className="question-wrap">
            <div className="progress-line">
              <div className={`progress-inline inline-${questionIndex}`}></div>
            </div>
            <div className="progress-bar">
              <div className='p-item activated'>
                <i><b></b></i>
              </div>
              <div className={`p-item ${questionIndex > 1 ? 'activated' : ''}`}>
                <i><b></b></i>
              </div>
              <div className={`p-item ${questionIndex > 2 ? 'activated' : ''}`}>
                <i><b></b></i>
              </div>
              <div className={`p-item ${questionIndex > 3 ? 'activated' : ''}`}>
                <i><b></b></i>
              </div>
              <div className={`p-item ${questionIndex > 4 ? 'activated' : ''}`}>
                <i><b></b></i>
              </div>
            </div>
            <div className="question-content-container">
              {
                questionType === 1 ? (
                  <div>
                    <p>{questionIndex}. {question}</p>
                    <RadioGroup 
                      onChange={this.onChange} 
                      value={answer}
                      size="large"
                    >
                      {
                        optionList.map(option => {
                          const	{ code, desc } = option
                          return (
                            <p key={code} className="option">
                              <Radio value={code}>{code}. {desc}</Radio>
                            </p>
                          )
                        })
                      }
                    </RadioGroup>
                  </div>
                ) : (
                  <div className="fill-blank">
                    <p className="question">{questionIndex}. {question}</p>
                    <p className="tips">（请在下方横线上输入正确答案）</p>
                    <input onChange={this.onChange} />
                  </div>
                )
              }
              <span className={`btn next-btn ${questionIndex == 5 ? 'last-one' : ''}`} onClick={this.studentSaveAnwster}></span>
            </div>
          </div>
        </div>

        {
          isOver && (
            <div className="homework-result">
              <div className="result-bg">
                {/* <span onClick={this.handleClose} className="homework-close"></span> */}
                <span className={`result result-${result}`}></span>
              </div>
              <span className="btn-back" onClick={this.handleClose}></span>
              {/* {
                result == 4 || result == 3 ? <span className="btn" onClick={this.lookErrorBook}></span> : <span className="btn-back" onClick={this.handleClose}></span>
              } */}
            </div>
          ) || <Fragment></Fragment>
        }
      </div>
    )
  }
}